body{padding: 0; margin: 0; font-family: "microsoft yahei"}
ul,li,dl,dt,dd,h1,h2,h3,h4,h5,h6{ list-style: none; padding: 0; margin: 0;}
a{text-decoration: none;}
a:hover{text-decoration: none;}


                    
.small-font{ font-size: 12px !important;}
.mid-font{ font-size: 20px !important;}

/*audio&video frame*/
.wrapper{position: relative; }

/*Head img/video Area*/
#headImg{ width: 100%; height: 75%; position: fixed;top: 0; left: 0;}
.coverPanel{ display: block; background: url(panelBg.jpg); background-size: 100%; position: relative; height: 100%; }

.centerImg{ display: block; width: 250px; height: 250px; position: absolute; left: 50%; margin-left: -125px; top: 50%; margin-top:-125px; border-radius: 50%; -webkit-border-radius:50%; -o-border-radius:50%; }
.centerImg img{border-radius: 50%; -webkit-border-radius:50%; -o-border-radius:50%; width: 250px; height: 250px;}
.rotateImg{animation:zhuan 15s infinite linear; -webkit-animation:zhuan 15s infinite linear;}
@keyframes zhuan{ 
	from{transform:rotate(0deg);} 
	to {transform:rotate(360deg);}
}

@-webkit-keyframes zhuan{ 
	from{transform:rotate(0deg);} 
	to {transform:rotate(360deg);}
}

/*Bottom duration/controller Area*/
#controlPanel{ width: 100%; height: 25%; position: fixed; bottom: 0; left: 0; background: #CDC9C9;}

.durationArea{ position: relative; width: 75%; margin: 20px auto; height: 30px;}
progress{ width: 100%; position: relative; height: 5px; border: none; background: #FFE4C4;}
progress::-moz-progress-bar{ background: #FFE4C4;}
progress::-webkit-progress-bar{background: #FFE4C4;}
progress::-webkit-progress-value{ background: #279ff6;}

.controller{ position: relative; padding: 10px 0; text-align: center;}
.btn{ display: inline-block; border: none; background:none; outline: none; font-size: 32px !important; line-height: 32px; color:#3D3D3D;margin: 0 2%;}

.toast{ display: none; position:fixed; width: 100px;  vertical-align: middle; top: 50%; margin-top: -25px; left: 50%; margin-left: -50px; background: #000; opacity: 0.5; zoom: 2; border-radius: 5px;}
.toast .info{color: #fff; text-align:center; line-height: 30px; margin: 2px;}
.toast .btns{ display: block; font-size: 8px; border:none; background: none; outline: none; color: #fff; width: 80px; margin: 0 auto;}


/*hide area*/
#music_list{ display: block; position: absolute; width: 100%; height: 300px; overflow: scroll; bottom: -300px; z-index: 2; background: #000; opacity: 0.9;}
#music_list ul { margin:10px 20px; vertical-align: middle;}
#music_list ul li { font-size: 14px; line-height:30px; color: #f1f1f1;}
#music_list ul li:before{ content: "·"; padding-right: 5px}
#music_list ul li a{ color: #f1f1f1;}

/*hide music_list btn*/
#music_list .close{ width: 15px; height: 15px; position: relative; float: right; margin-right: 5px; color: #fff;}

.show-music-list{ animation: show 1s ease-in-out  alternate forwards }
@keyframes show{from{bottom:-300px;} to{ bottom: 0; }}
@-webkit-keyframes show{from{ bottom: -300px; } to{ bottom: 0;}}
@-o-keyframes show{from{ bottom: -300px;}to{ bottom: 0;}}

.hide-music-list{ animation: hide 1s ease-in-out alternate forwards }
@keyframes hide{ form {bottom: 0;} to{ bottom: -300px;}}
@-webkit-keyframes hide{ from{ bottom: 0;} to{ bottom: -300px;}}
@-o-keyframes hide{ from{ bottom: 0;} to{ bottom: -300px;}}


/*loading*/
.loadingArea{ position: absolute; width: 100%; height: 100%; z-index: 10;}

.spinner {
  margin: 0 auto;
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 100;
  top: 35%;
}
 
.cube1, .cube2 {
  background-color: #279ff6;
  width: 30px;
  height: 30px;
  position: absolute;
  top: 0;
  left: 0;
   
  -webkit-animation: cubemove 1.8s infinite ease-in-out;
  animation: cubemove 1.8s infinite ease-in-out;
}
 
.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
@-webkit-keyframes cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}
 
@keyframes cubemove {
  25% {
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% {
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% {
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% {
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% {
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}